<template>
  <div class="box">
    <header class="header">
      <!-- 使用导航栏组件 -->
      <van-nav-bar
        :title="proname"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <!-- 头部右侧的下拉选择菜单 -->
          <van-popover
            v-model="showPopover"
            theme="dark"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            @select = "moreEvent"
          >
            <template #reference>
              <van-icon name="more-o" size="18"/>
            </template>
          </van-popover>

        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <van-swipe class="detail-swipe" indicator-color="white">
        <van-swipe-item @click="previewImage(index)" v-for="(item, index) of banners" :key="index">
          <van-image
            fit="cover"
            :src="item"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 播放视频的图标 -->
      <van-icon v-if="flag" @click="openOverLay" name="play-circle-o" class="playBtn" size="36" color="#f66"/>
      <!-- 详情 -->
      <van-tag type="danger">{{ brand }}</van-tag> {{ category }}
      <h3>{{ proname }}</h3>
      <div>{{ originprice }}</div>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" @click="addProToCart" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <!-- 分享面板 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
    <!-- 视频播放的遮罩层 -->
    <van-overlay :show="show" @click="closeOverLay" class="vdoBox">
      <video ref="vdo" width="100%" src="https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/1b147065379705072794210305/v.f20.mp4?dockingId=f782a297-b570-4701-bcea-9ae0c0749efe&storageSource=3" controls>
      </video>
    </van-overlay>

  </div>
</template>
<script>
import Vue from 'vue'
import { getProDetail } from './../../api/detail'
import { addCart } from './../../api/cart'
import { Toast, ImagePreview, Overlay, ShareSheet, Popover, NavBar, Swipe, SwipeItem, Tag, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
Vue.use(Toast)
Vue.use(ImagePreview)
Vue.use(Overlay)
Vue.use(ShareSheet)
Vue.use(Popover)
Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Tag)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
export default {
  data () {
    return {
      proid: '',
      proname: '',
      originprice: 0,
      discount: 0,
      banners: [],
      sales: 0,
      category: '',
      brand: '',
      showPopover: false, // 控制右侧更多菜单的显示和隐藏
      actions: [{ text: '首页' }, { text: '分类' }, { text: '购物车' }, { text: '我的' }, { text: '分享' }],
      showShare: false, // 控制分享面板的显示和隐藏
      options: [ // 分享面板
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      show: false, // 控制视频播放遮罩层的显示和隐藏
      flag: true // 控制播放按钮的显示和隐藏
    }
  },
  mounted () {
    this.proid = this.$route.params.proid
    getProDetail(this.proid).then(res => {
      console.log(res)
      // 当前接口的banenrs数据有问题，需要前端自行处理 ---- 不意味着以后别的项目也需要
      this.banners = res.data.data.banners[0].split(',')
      this.proname = res.data.data.proname
      this.originprice = res.data.data.originprice
      this.discount = res.data.data.discount
      this.sales = res.data.data.sales
      this.category = res.data.data.category
      this.brand = res.data.data.brand
    })
  },
  methods: {
    addProToCart () {
      // 前端校验登录  本地存储的都是字符串
      if (localStorage.getItem('isLogin') === 'true') { // 前端已经表示登录
        // 调用加入购物车接口
        addCart({ // 一定要把参数传递完整，否则会有小发现
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          Toast('加入购物车成功')
        })
      } else {
        this.$router.push('/login')
      }
    },
    previewImage (index) {
      ImagePreview({ // 预览图片
        images: this.banners,
        startPosition: index
      })
    },
    openOverLay () { // 打开遮罩层，播放视频，隐藏按钮
      this.show = true
      this.flag = false
      this.$refs.vdo.play()
    },
    closeOverLay () { // 关闭遮罩层，暂停视频，显示按钮
      this.$refs.vdo.pause()
      this.flag = true
      this.show = false
    },
    moreEvent (action, index) { // 右上角更多菜单
      console.log(index, action)
      switch (index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/kind')
          break
        case 2:
          this.$router.push('/cart')
          break
        case 3:
          this.$router.push('/user')
          break
        case 4:
          this.showShare = true // 控制分享面板的显示
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="stylus">
.detail-swipe
  height 2.6rem
.van-popover[data-popper-placement=bottom-end] .van-popover__arrow {
    right: 0px;
}
.playBtn
  position fixed
  top 2.4rem
  left 50%
  transform translateX(-50%)
  z-index 1000
.vdoBox
  display flex
  justify-content center
  align-items center
</style>
